<template>
  <div>
    <el-form ref="goodsBrandRef" :inline="true" :model="goodsBrandCl.goodsBrandS" class="demo-form-inline">
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="goodsBrandCl.goodsBrandS.name" type="text" />
      </el-form-item>
      <el-form-item label="品牌编码" prop="code">
        <el-input v-model="goodsBrandCl.goodsBrandS.code" type="text" />
      </el-form-item>
      <el-form-item label="品牌首字母" prop="letter">
        <el-select v-model="goodsBrandCl.goodsBrandS.letter">
          <el-option v-for="item in goodsBrandCl.letters" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchGoodsBrand()">搜索</el-button>
        <el-button type="primary" @click="reset(goodsBrandRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加商品品牌
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="goodsBrandCl.goodsBrandTable" :default-expand-all="false" row-key="id" stripe style="width: 100%">
      <el-table-column label="名称" prop="name" header-align="center" align="center" />
      <el-table-column label="编码" prop="code" header-align="center" align="center" />
      <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" />
      <el-table-column label="介绍" header-align="center" align="center" :show-overflow-tooltip="true">
        <template #default="scope">
          <div v-html="scope.row.describes" />
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" header-align="center" label="操作">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="edit(scope.row.id)"> 编辑 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleted(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="goodsBrandCl.goodsBrandDialog" destroy-on-close title="添加品牌" @close="resetDialog(addRef)">
      <el-form ref="addRef" :model="goodsBrandCl.goodsBrandEdit" :rules="goodsBrandCl.goodsBrandRule">
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="goodsBrandCl.goodsBrandEdit.name" placeholder="品牌名称" type="text" />
        </el-form-item>
        <el-form-item label="品牌编码" prop="code">
          <el-input v-model="goodsBrandCl.goodsBrandEdit.code" placeholder="品牌编码" type="text" />
        </el-form-item>
        <el-form-item label="品牌首字母" prop="letter">
          <el-select v-model="goodsBrandCl.goodsBrandEdit.letter">
            <el-option v-for="item in goodsBrandCl.letters" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="介绍" prop="describes">
          <Editor v-model:editorValue="goodsBrandCl.goodsBrandEdit.describes"></Editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editGoodsBrand">保存 </el-button>
          <el-button @click="goodsBrandCl.goodsBrandDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <Page :pageData="goodsBrandCl.goodsBrandS" @selectPage="searchGoodsBrand"></Page>
</template>
<script lang="ts" setup>
import { goodsBrandClass } from '@/page/types/sale/goodsBrand'
import Editor from '@/components/MyEditor.vue'
import { addGoodsBrand, delGoodsBrand, detailGoodsBrand, goodsBrandPage, updateGoodsBrand } from '@/api/sale'
import { ElMessage, FormInstance } from 'element-plus/es'
const goodsBrandCl = reactive(new goodsBrandClass())
const goodsBrandRef = ref()
const addRef = ref()

const searchGoodsBrand = () => {
  goodsBrandPage(goodsBrandCl.goodsBrandS).then(res => {
    goodsBrandCl.goodsBrandTable = res.data.records
    goodsBrandCl.goodsBrandS.page = res.data.current
    goodsBrandCl.goodsBrandS.size = res.data.size
    goodsBrandCl.goodsBrandS.total = res.data.total
  })
}
const resetDialog = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  goodsBrandCl.goodsBrandEdit = {}
}
const reset = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  searchGoodsBrand()
}
const opendialog = () => {
  goodsBrandCl.goodsBrandDialog = true
  searchGoodsBrand()
}
const edit = (id: string) => {
  searchGoodsBrand()
  detailGoodsBrand(id).then(res => {
    goodsBrandCl.goodsBrandEdit = res.data
    goodsBrandCl.goodsBrandDialog = true
  })
}
const editGoodsBrand = () => {
  if (goodsBrandCl.goodsBrandEdit.id) {
    updateGoodsBrand(goodsBrandCl.goodsBrandEdit).then(res => {
      searchGoodsBrand()
      ElMessage({
        message: '更新品牌信息成功',
        type: 'success'
      })
    })
  } else {
    addGoodsBrand(goodsBrandCl.goodsBrandEdit).then(res => {
      searchGoodsBrand()
      ElMessage({
        message: '保存品牌信息成功',
        type: 'success'
      })
    })
  }
  goodsBrandCl.goodsBrandDialog = false
}
const deleted = (id: string) => {
  delGoodsBrand(id).then(res => {
    searchGoodsBrand()
    ElMessage({
      message: '删除品牌成功',
      type: 'success'
    })
  })
}
onMounted(() => {
  searchGoodsBrand()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
